<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input class="filter-item w-200" placeholder="用户名" size="medium" v-model="query.name"></el-input>
            <el-select class="filter-item w-200" v-model="query.school_id" clearable size="medium" placeholder="请选择学校">
                <el-option
                        v-for="item in schoolData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button v-permission="'school-admin-logs.index'" class="filter-item" size="medium" icon="el-icon-search" @click="fetchList(true)">搜 索</el-button>
        </div>
        <el-table :data="logs" v-loading="loading" border stripe>
            <el-table-column label="#" width="100px" align="center">
                <template slot-scope="scope">
                    {{query.size * (query.page-1) + scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="school_admin.name" label="用户名" width="200px" align="center"></el-table-column>
            <el-table-column prop="message" label="操作" width="300px" align="center"></el-table-column>
            <el-table-column prop="action_ip" label="ip" width="200px" align="center"></el-table-column>
            <el-table-column label="所属学校" width="200px" align="center">
                <template slot-scope="scope">
                    <div v-for="school in schoolData" :key="school.id" v-if="scope.row.school_admin && school.id===scope.row.school_admin.school_id">{{ school.name }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="user_agent" label="登录信息" align="center"></el-table-column>
            <el-table-column prop="action_time" label="操作时间" width="200px" align="center"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { fetchSchoolAdminLogs } from '@/api/school'
    import { fetchSchools } from '@/api/data'
    export default {
      name: 'schoolAdminLog',
      data() {
        return {
          loading: false,
          schoolData: [],
          logs: [],
          total: 0,
          query: {
            school_id: '',
            name: '',
            size: 10,
            page: 1
          }
        }
      },
      methods: {
        handleSizeChange(size) {
          this.query.size = size
          this.fetchList()
        },
        handleCurrentChange(page) {
          this.query.page = page
          this.fetchList()
        },
        fetchList(resetPage = false) {
          this.loading = true
          if (resetPage === true) {
            this.query.page = 1
          }
          fetchSchoolAdminLogs(this.query).then(res => {
            this.logs = res.data
            this.total = res.meta.total
            this.loading = false
          })
        },
        fetchSchools() {
          fetchSchools(this.query).then(res => {
            this.schoolData = res.schools
          })
        }
      },
      created() {
        this.fetchList()
        this.fetchSchools()
      }
    }
</script>

<style scoped>

</style>
